1import { Button, Font, ForEach, List, Navigation, NavigationStack, Script, Section, Text, VStack } from "scripting"
2
3function Example() {
4 const dismiss = Navigation.useDismiss()
5
6 const namedFonts: Font[] = [
7 "largeTitle",
8 "title",
9 "headline",
10 "body",
11 "caption"
12 ]
13
14 return <NavigationStack>
15 <List
16 navigationTitle={"Iterating"}
17 navigationBarTitleDisplayMode={"inline"}
18 toolbar={{
19 cancellationAction: <Button
20 title={"Done"}
21 action={dismiss}
22 />
23 }}
24 >
25 <Section
26 header={
27 <Text
28 textCase={null}
29 >ForEach</Text>
30 }
31 >
32 <ForEach
33 count={namedFonts.length}
34 itemBuilder={index => {
35 const namedFont = namedFonts[index]
36 return <Text
37 key={namedFont}
38 font={namedFont}
39 >{namedFont}</Text>
40 }}
41 />
42 </Section>
43
44 <Section
45 header={
46 <Text
47 textCase={null}
48 >Iterating in code block</Text>
49 }
50 >
51 <VStack>
52 {namedFonts.map(namedFont =>
53 <Text
54 font={namedFont}
55 >{namedFont}</Text>
56 )}
57 </VStack>
58 </Section>
59 </List>
60 </NavigationStack>
61}
62
63async function run() {
64 await Navigation.present({
65 element: <Example />
66 })
67
68 Script.exit()
69}
70
71run()
